import callFeedback from "@/components/common/modalFeedback"
import requewt from "@/utils/requewt"
import { Badge, Button, Grid, Space } from 'antd-mobile'
import { useEffect, useMemo, useState } from "react"
const { BASE_PATH, API } = require("@/config")

export const cardMaps = [
    {
        name: 'beijing',
        position: 1,
        img: `${BASE_PATH}/img/game/card-beijing-1.png`
    },
    {
        name: 'shanghai',
        position: 2,
        img: `${BASE_PATH}/img/game/card-shanghai-1.png`
    },
    {
        name: 'chongqing',
        position: 3,
        img: `${BASE_PATH}/img/game/card-chongqing-1.png`
    },
    {
        name: 'changchun',
        position: 4,
        img: `${BASE_PATH}/img/game/card-changchun-1.png`
    },
    {
        name: 'xizang',
        position: 5,
        img: `${BASE_PATH}/img/game/card-xizang-1.png`
    },
]
export const showGameCard = (data, handler) => {
    if (!data) return
    const card = cardMaps.find(i => i.name === data.name)
    const m = callFeedback({
        bodyClassName: 'draw-result',
        hideClose: true,
        content: <div className="draw-result-content">
            <img
                className="card-bg"
                src={`${BASE_PATH}/img/game/card-bg.png`}
            />
            <img
                src={card?.img}
                // width='356'
                className="city-card"
            />
        </div>,
        actions: [
            <Space direction="vertical" key="action">
                <Button className="act-btn act-btn-bevel" onClick={() => {
                    m.close()
                }}>收下游卡</Button>
                <Button className="act-btn act-btn-bevel" onClick={() => {
                    m.close()
                    handler.enter()
                }}>继续抽卡</Button>
            </Space>
        ]
    })
}
export const useUserCard = () => {
    const [userCard, setUserCard] = useState([])
    const userBaseCards = useMemo(() => {
        const cards = [
            {
                name: 'beijing',
                position: 1,
                img: `${BASE_PATH}/img/game/card-beijing.png`
            },
            {
                name: 'shanghai',
                position: 2,
                img: `${BASE_PATH}/img/game/card-shanghai.png`
            },
            {
                name: 'chongqing',
                position: 3,
                img: `${BASE_PATH}/img/game/card-chongqing.png`
            },
            {
                name: 'changchun',
                position: 4,
                img: `${BASE_PATH}/img/game/card-changchun.png`
            },
            {
                name: 'xizang',
                position: 5,
                img: `${BASE_PATH}/img/game/card-xizang.png`
            },
        ]
        userCard.forEach(i => {
            const index = cards.findIndex((card) => card.name === i.name)
            cards.splice(index, 1, { ...cards[index], ...i })
        })
        return cards
    }, [userCard])

    const getUserCards = () => {
        requewt(API.user.userCardList).then((resp) => {
            setUserCard(resp?.data || [])

        })
    }
    useEffect(() => {
        getUserCards()
    }, [])
    return {
        userBaseCards,
        getUserCards
    }
}

export const CardsComponents = ({ userCard = [], onClick }) => {
    return (
        <Grid columns={5} gap={10} className="citys-card" >
            {
                userCard.map(({ name, img, num }, index) => (
                    <Grid.Item key={name} onClick={() => onClick({ name, num, img })} >
                        <Badge content={num} color="#e59558">
                            <img
                                className={!num ? 'no-has' : ''}
                                src={img}
                            />
                        </Badge>
                    </Grid.Item>
                ))
            }

        </Grid>
    )
}